<template>
<div class="tabpane ivu-tabs-tabpane">
    <div class="formList">
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <FormItem label="用户名" prop="name">
                <Input v-model.trim="formCustom.name" placeholder="5-20个字符（包括小写字母、数字、下划线、中文）"></Input>
            </FormItem>
            <FormItem label="设置密码" prop="passwd">
                <Input type="password" v-model="formCustom.passwd" placeholder="6-20位字符（包括数字、字母、符号两个以上组合）"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="passwdCheck">
                <Input type="password" v-model="formCustom.passwdCheck" placeholder="请再次确认密码"></Input>
            </FormItem>
            <FormItem label="手机号码" prop="phoneNum">
                <Input type="text" v-model="formCustom.phoneNum" placeholder="请输入手机号码"></Input>
            </FormItem>

            <FormItem label="手机验证码" prop="vcode">
                <div class="vcode">
                    <Input type="text" v-model="formCustom.vcode" placeholder="请输入手机验证码"></Input>
                    <Button type="primary" class="vcodeBtn" v-text="vcodeData.text" :disabled="vcodeData.disabled" ></Button>
                </div>
            </FormItem>

            <FormItem prop="interest">
                <CheckboxGroup v-model="formCustom.interest" @on-change="checkAllGroupChange">
                    <Checkbox label="true">同意新华印务《用户协议》和《隐私声明》</Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" class="registerBtn" :disabled="btnData.disabled">登录</Button>
            </FormItem>
        </Form>
    </div>
</div>
</template>

<script>
const pwdReg = /^[a-zA-Z0-9!@#$%^&*()_+]{6,16}$/; //密码验证
const userReg = /[A-Za-z0-9_\-\u4e00-\u9fa5]{5,20}/; // 用户名验证
const phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; //手机验证
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                if (this.formCustom.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formCustom.validateField('passwdCheck');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formCustom.passwd) {
                callback(new Error('输入的密码不一致'));
            } else {
                callback();
            }
        };

        return {
            formCustom: {
                name: '',
                passwd: '',
                passwdCheck: '',
                phoneNum: '',
                vcode: '',
                interest: ['true'],
            },
            // fruit: [''],
            ruleCustom: {
                name: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'blur'
                }, {
                    pattern: userReg,
                    message: '5-20个字符（包括小写字母、数字、下划线、中文）',
                    trigger: 'blur'
                }],
                passwd: [{
                    validator: validatePass,
                    trigger: 'blur'
                }, {
                    pattern: pwdReg,
                    message: '密码由（6-20位字母/数字/符号）组成',
                    trigger: 'blur'
                }],
                passwdCheck: [{
                    validator: validatePassCheck,
                    trigger: 'blur'
                }],

                // 手机验证
                phoneNum: [{
                    required: true,
                    message: '手机号码不能为空',
                    trigger: 'blur'
                }, {
                    pattern: phoneReg,
                    message: '请输入正确的手机号码',
                    trigger: 'blur'
                }],
                interest: [{
                    required: true,
                    type: 'array',
                    min: 0,
                    message: '请仔细阅读相关协议',
                    trigger: 'change'
                }, ],

            },

            // 验证码按钮
            vcodeData: {
                text: '获取验证码',
                disabled: false,
            },
            // 注册按钮
            btnData: {
                disabled: false,
            },
        }
    },
    methods: {

        checkAllGroupChange() {
            if (this.formCustom.interest.length != 1) {
                this.btnData.disabled = true;
            } else {
                this.btnData.disabled = false;

            }
        },
        // 登录按钮
        handleSubmit() {
            // let checked = this.formCustom.checkbox.length;
            // console.log(checked)
            // if(checked === 0) {
            //     this.btnData.disabled = true;
            // }
        },

    },

}
</script>

<style lang="less" scoped>
.ivu-form-item-label::before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed4014;
}

.registerBtn {
    background-color: #D92410;
    border-color: none !important;
    width: 410px;
    font-size: 18px;

    &:hover {
        border-color: none;
        background-color: #D92410;
    }

}

.formList {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    height: auto;
    margin: 68px 0 107px;
    line-height: 30px;

    .ivu-form {
        width: 620px;

    }

    .vcode {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;

        ju .vcodeBtn {
            width: 140px;
            margin-left: 15px;
        }
    }

    .vcodeBtn {
        background-color: #D92410;
        border-color: none !important;
        color: #fff;

        &:hover {
            border-color: none;
        }
    }

}

.ivu-btn-primary {
    border-color: #fff !important;

}

.ivu-form-item-content {
    width: 500px;
}

.ivu-radio-wrapper {
    margin-right: 50px;
}
.user{
    height: 600px!important;
}
</style>
